<template>
  <div>
    <el-dialog
      :title="option.title"
      :visible.sync="isShow"
      @close="closeUser"
      width="85%"
      @open="openCreate"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="loading">
        <div class="content">
          <el-card style="height:420px">
            <el-form
              size="mini"
              ref="form"
              :model="form"
              inline
              label-width="150px"
              label-position="left"
            >
              <el-row :gutter="10">
                <el-col :span="12">
                  <span>排名粒度:</span>
                  <el-radio-group v-model="radio5" size="small">
                    <el-radio-button label="主管"></el-radio-button>
                    <el-radio-button label="组长"></el-radio-button>
                  </el-radio-group>
                  <el-button type="primary" size="small">区域</el-button>
                  <el-button type="primary" size="small">业务</el-button>
                  <el-button size="small">坐席</el-button>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <div style="float:right">
                  <el-checkbox v-model="checked">过滤无效对象</el-checkbox>
                  <el-button size="small">自定义报表模板</el-button>
                  <el-button size="small">设置综合得分占比</el-button>
                  <el-button size="small">筛选指标</el-button>
                  <el-button size="small">发布任务</el-button>
                </div>
              </el-row>
              <el-row :gutter="10">
                <span style="float:right">
                  综合得分排名：构成指标及其占比；其计算规则按指标的排名*指标占比的总和
                </span>
              </el-row>
              <el-row>
                <el-collapse accordion>
                  <el-collapse-item>
                    <template slot="title">
                      <el-checkbox v-model="checked">效能指标</el-checkbox>
                    </template>
                      <el-col :span="8"><el-checkbox v-model="checked">呼入话量</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">呼出话量</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">ACD通话时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">非ACD通话时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">非ACD通话时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">整理时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">件均处理时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">Hold时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">咨询时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">外拨拨号时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">外拨通话时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">示忙时长</el-checkbox></el-col>
                      <el-col :span="8"><el-checkbox v-model="checked">登录时长</el-checkbox></el-col>
                  </el-collapse-item>
                </el-collapse>
              </el-row>
              <el-row :gutter="10">
                <!-- <dynamic-table :tableData="tableData" :tableLabel="tableLabel">
                </dynamic-table> -->
                <el-table
                  :data="tableData1"
                  ref="tableData"
                  border
                  class="tableMarginTop"
                  :row-style="rowClass"
                  @selection-change="handleSelectionChange"
                  header-row-class-name="tableHeaderClass"
                  style="min-height:390px;"
                  @row-click="clickRow"
                  >
                  <el-table-column
                    label="对象"
                    width="160px">
                    <template slot-scope="scope">
                      <i class="el-icon-document" @click="showOptionDetails()"></i>
                      <span style="margin-left: 10px">{{ scope.row.object }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop='ranking' sortable width='130px' label='综合得分排名'></el-table-column>
                  <el-table-column prop='percapacity' sortable :label="'人均产能(20%)'"></el-table-column>
                  <el-table-column prop='aht' sortable :label="'AHT(20%)'"></el-table-column>
                  <el-table-column prop='errorrate' sortable :label="'差错率(20%)'"></el-table-column>
                  <el-table-column prop='npsrecommend' sortable :label="'NPS推荐率(20%)'"></el-table-column>
                  <el-table-column prop='satisfaction' sortable :label="'满意度(10%)'"></el-table-column>
                  <el-table-column prop='punctuality' sortable :label="'遵时率(20%)'"></el-table-column>
                </el-table>

              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType" >关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="绩效趋势"
      :visible.sync="dialogVisibleM"
      width="950px"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="loading">
        <div class="content">
          <el-card style="height:350px">
            <el-form
              size="mini"
              ref="form"
              :model="form"
              inline
              label-width="150px"
              label-position="left"
            >
              <el-row :gutter="10">
                <!-- <el-col :span="12">
                  <el-radio v-model="radio" label="1" style="color:#2ca7e9; padding-left: 0px; margin: 0px; ">15分钟</el-radio>
                  <el-radio v-model="radio" label="2" style="color:#2ca7e9; padding-left: 0px; margin: 0px;">30分钟</el-radio>
                  <el-radio v-model="radio" label="4" style="color:#2ca7e9; padding-left: 0px; margin: 0px;">60分钟</el-radio>
                  el-icon-circle-cross
                </el-col> -->
                <el-col :span="12" >
                  <el-button size="mini" type="success" >查询</el-button>
                  <el-button size="mini" >筛选指标</el-button>
                  <el-button size="mini" >导出</el-button>
                  <el-button size="mini" >返回</el-button>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <dynamic-table :tableData="tableData2" :tableLabel="tableLabel">

                </dynamic-table>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="this.closeOptionDetails" >关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request1 from "@/common/utils/requestTest";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import dynamicTable from "@/components/dynamicTable/";

export default {
  name: '',
  components: {
    dynamicTable
  },
  data() {
    return {
      radio:"",
      radio5:"主管",
      checked:false,
      selectRow:[],
      selectData:[],
      loading: false,
      dialogVisibleM: false,
      tableData:[
        { alarm: "告警", agentid: "24925", extension:"20087", agentname:"史伟", status:"通话中", elapsedtime:"002021", checkintime:"085526", percallvolume:"30", perprocessingtime:"205", callduration:"205",useratio:"96.6",skill:"11" },
        { alarm: "告警", agentid: "24928", extension:"20079", agentname:"舒宁", status:"示忙", elapsedtime:"000524", checkintime:"075413", percallvolume:"22", perprocessingtime:"214", callduration:"214",useratio:"93.3",skill:"11" },
        { alarm: "无", agentid: "24922", extension:"20044", agentname:"张梦琪", status:"小休", elapsedtime:"001024", checkintime:"081424", percallvolume:"30", perprocessingtime:"239", callduration:"239",useratio:"96.6",skill:"11" },
      ],
      tableData1:[
        {object:'主管-丁香-呼入',ranking:'5',percapacity:'102(4/5)',aht:'168(3/5)',errorrate:'5.7%(3/5)',npsrecommend:'83.2%(4/5)',satisfaction:'86.4%(5/5)',punctuality:'85.2%(3/5)'},
        {object:'主管-王山-呼入',ranking:'4',percapacity:'115(1/5)',aht:'182(5/5)',errorrate:'8.0%(5/5)',npsrecommend:'79.2%(5/5)',satisfaction:'88.2%(3/5)',punctuality:'87.2%(2/5)'},
        {object:'主管-陈明晓-呼入',ranking:'3',percapacity:'109(2/5)',aht:'187(4/5)',errorrate:'6.9%(4/5)',npsrecommend:'89.0%(3/5)',satisfaction:'91.0%(2/5)',punctuality:'84.0%(4/5)'},
        {object:'主管-李青青-呼入',ranking:'2',percapacity:'100(5/5)',aht:'165(1/5)',errorrate:'3.0%(1/5)',npsrecommend:'94.2%(1/5)',satisfaction:'88.2%(3/5)',punctuality:'82.3%(5/5)'},
        {object:'主管-张帆-呼入',ranking:'1',percapacity:'107(3/5)',aht:'166(2/5)',errorrate:'5.4%(2/5)',npsrecommend:'93.1%(2/5)',satisfaction:'91.7%(1/5)',punctuality:'92.0%(1/5)'}
      ],
       tableData2:[
        { KPI: "人均产能", "12-11": "102", "12-12":"100", "12-13":"150", "12-14":"119", "12-15":"0", "12-16":"0", "12-17":"118", "12-18":"117", "12-19":"110", "12-20":"128", "12-21":"123", "12-22":"109", "12-23":"114", "12-24":"110" },
        { KPI: "AHT", "12-11": "168", "12-12":"165", "12-13":"169", "12-14":"0", "12-15":"0", "12-16":"168", "12-17":"170", "12-18":"165", "12-19":"168", "12-20":"170", "12-21":"179", "12-22":"175", "12-23":"178", "12-24":"180" },
        { KPI: "差错率", "12-11": "5.6%", "12-12":"0.0%", "12-13":"5.6%", "12-14":"6.9%", "12-15":"6.8%", "12-16":"6.3%", "12-17":"0.0%", "12-18":"8.6%", "12-19":"6.1%", "12-20":"6.9%", "12-21":"7.0%", "12-22":"5.6%", "12-23":"6.8%", "12-24":"6.9%" },
        { KPI: "NPS推荐率", "12-11": "96.4%", "12-12":"86.2%", "12-13":"83.2%", "12-14":"0.0%", "12-15":"0.0%", "12-16":"79.2%", "12-17":"93.1%", "12-18":"86.2%", "12-19":"83.2%", "12-20":"82.9%", "12-21":"93.1%", "12-22":"94.2%", "12-23":"92.9%", "12-24":"89.0%" },
        { KPI: "满意度", "12-11": "88.2%", "12-12":"91.7%", "12-13":"93.3%", "12-14":"0.0%", "12-15":"0.0%", "12-16":"92.8%", "12-17":"86.4%", "12-18":"88.2%", "12-19":"91.7%", "12-20":"93.3%", "12-21":"95.0%", "12-22":"94.4%", "12-23":"92.8%", "12-24":"91.0%" },
        { KPI: "遵时率", "12-11": "85.2%", "12-12":"87.2%", "12-13":"92.0%", "12-14":"-", "12-15":"-", "12-16":"85.1%", "12-17":"85.1%", "12-18":"85.7%", "12-19":"85.3%", "12-20":"87.2%", "12-21":"85.1%", "12-22":"83.3%", "12-23":"87.7%", "12-24":"84.0%" },
      ],
      tableLabel: [
        { label: "KPI", width: "120",prop:"KPI",type:"normal" },
        { label: "12-11", width: "",prop:"12-11",type:"normal" },
        { label: "12-12", width: "",prop:"12-12",type:"normal" },
        { label: "12-13", width: "",prop:"12-13",type:"normal" },
        { label: "12-14", width: "",prop:"12-14",type:"normal" },
        { label: "12-15", width: "",prop:"12-15",type:"normal" },
        { label: "12-16", width: "",prop:"12-16",type:"normal" },
        { label: "12-17", width: "",prop:"12-17",type:"normal" },
        { label: "12-18", width: "",prop:"12-18",type:"normal" },
        { label: "12-19", width: "",prop:"12-19",type:"normal" },
        { label: "12-20", width: "",prop:"12-20",type:"normal" },
        { label: "12-21", width: "",prop:"12-21",type:"normal" },
        { label: "12-22", width: "",prop:"12-22",type:"normal" },
        { label: "12-23", width: "",prop:"12-23",type:"normal" },
        { label: "12-24", width: "",prop:"12-24",type:"normal" },
      ],
      form: {

      },
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
  },
  watch:{
    
    selectData(data){
      this.selectRow=[];
      if(data.length>0){
        data.forEach((item,index)=>{
          this.selectRow.push(this.tableData.indexOf(item));
        });
      }
    }
  },
  methods: {
    closeOptionDetails() {
      //关闭弹窗事件，清除表单验证
      this.dialogVisibleM = false;
    }, 
    showOptionDetails(){
      this.dialogVisibleM = true;
    },
    clickRow(row){
      this.$refs.tableData.toggleRowSelection(row)
    },
    handleSelectionChange(data){
      this.selectData = data;
    },
    rowClass({row,rowIndex}){
      if(this.selectRow.includes(rowIndex)){
        return {"background-color":"#dff0d8"}
      }
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.$emit("refreshTable");
      this.detailon = true;
      this.showCommon = false;
    },
    addType() {
      //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      this.$refs.form.clearValidate();
    },
    openCreate(){

    }
  }
};
</script>
<style lang="scss" scoped>


